<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1300" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false" draggable>
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="90" label-position="right">
            <el-header style="padding:0 15px;height: 40px;">
                <div class="left-panel">
                    <el-button type="primary" @click="costPush">提交</el-button>
                    <el-button type="primary" @click="getCostList(costform.id)">刷新</el-button>
                </div>
            </el-header>
            <sc-form-table ref="table" class="formtable" v-model="costform.alldata" :addTemplate="costTemplate" placeholder="暂无数据" height="455" show-summary @tableAdd="costTableAdd">
                <el-table-column label="商品名称" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.goods_id" placeholder="请选择商品" clearable filterable @change="goodsChange(scope.row)">
                            <el-option v-for="item in goodsList" :key="item.id" :label="item.goods_name" :value="item.id"/>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="明细" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.detail" placeholder="明细"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="单价" align="center" prop="price">
                    <template #default="scope">
                        <el-input v-model="scope.row.price" placeholder="单价" @focus="onFocus($event)" @input="totalCalc"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="数量" align="center" prop="number">
                    <template #default="scope">
                        <el-input v-model="scope.row.number" placeholder="数量" @focus="onFocus($event)" @input="totalCalc"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="小计" align="center" prop="total">
                    <template #default="scope">
                        <el-input v-model="scope.row.total" placeholder="小计" readonly></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="结算周期" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.settlement" placeholder="请选择结算周期" style="width:100%" clearable filterable>
                            <el-option label="月结" :value="0"/>
                            <el-option label="现结" :value="1"/>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="是否结账" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.is_checkout" placeholder="请选择" style="width:100%" clearable filterable>
                            <el-option label="是" :value="1"/>
                            <el-option label="否" :value="0"/>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="供应商名称" align="center">
                    <template #default="scope">
                        <el-select v-model="scope.row.supplier_id" placeholder="请选择供应商" clearable filterable style="color:red">
                            <el-option v-for="item in scope.row.applyList" :key="item.id" :label="item.supplier_name" :value="item.id" />
                        </el-select>
                    </template>
                </el-table-column>
            </sc-form-table>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				add: '新增合同',
				edit: '项目成本',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
            goodsList:[],           //商品
            costTemplate: {},
            costform:{              //成本数据
                id:"",
                alldata:[],
            },
		}
	},
	mounted() {
        this.getGoods()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        // 商品
        async getGoods(){
            var res = await this.$API.product.list.all.get();
            this.goodsList = res.data;
        },
        // 项目成本加按钮点击
        costTableAdd(data){
            data.map(item=>{
                if(!item.id){
                    item.project_id = this.costform.id
                    item.reserve_fund_id = ''
                }
            })
        },
        // 成本计算
        totalCalc(){
            let count = 0
            this.costform.alldata.map(item=>{
                if(item.price && item.number){
                    item.total = (Number(item.price) * Number(item.number)).toFixed(2)
                    count = count + Number(item.price) * Number(item.number)
                }
            })
            this.info.cost_all = (count).toFixed(2)
            this.info.profit = (this.info.total_price - this.info.cost_all).toFixed(2)
            this.info.profit_margin = ((Number(this.info.profit) / Number(this.info.total_price))*100).toFixed(2)
        },
        // 获取项目成本数据
        async getCostList(e){
            this.costform.id = e
            var res = await this.$API.project.itemcost.all.get({project_id:e});
            let goods = []
            res.data.map(item=>{
                this.goodsChange(item)
                goods.push({
                    id:item.id,
                    project_id:e,
                    goods_id:item.goods_id,
                    detail:item.detail,
                    price:item.price,
                    number:item.number,
                    total:(Number(item.price) * Number(item.number)).toFixed(2),
                    settlement:item.settlement,
                    is_checkout:item.is_checkout,
                    supplier_id:Number(item.supplier_id),
                    reserve_fund_id:item.reserve_fund_id,
                })
            })
            this.costform.alldata = goods;
        },
        // 项目成本提交
        async costPush(){
            var res = await this.$API.project.itemcost.allAdd.post(this.costform);
            this.isSaveing = false;
            if (res.code == 1) {
                this.getCostList(this.costform.id)
                this.$emit('success', this.costform, this.mode)
                this.visible = false;
                this.$message.success("操作成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
        },
        async goodsChange(row){
            this.goodsList.map(item=>{
                if(item.id == row.goods_id){
                    row.supplier = item.supplier_id
                }
            })
            var res = await this.$API.apply.apply.all.get({supplier_id:row.supplier});
            row.applyList = res.data
            this.costform.alldata.map(item=>{
                if(item.goods_id == row.goods_id){
                    item.applyList = res.data
                }
            })
        },
	}
}
</script>

<style lang="scss">
.el-input-group__append{
    padding: 0 8px;
}
.SeletBox {
	width: 100%;
	display: flex;
	align-items: center;
}
</style>
